<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: 灰佳小白 1150248441@qq.com
 * @LastEditTime: 2022-06-29 13:37:43
-->
<template>
<div>
    <div style="float:left;display:flex">
        <el-input placeholder="请输入分类名" v-model="CateName" clearable style="margin-right: 10px" @clear="clear">
        </el-input>
        <el-button type="primary" @click="search" style="margin-bottom: 10px">
            <i class="iconfont el-iconel-icon-search" /> 搜索</el-button>
    </div>
    <div style="float:right">
        <el-button type="success" @click="addUser" style="margin-bottom: 10px">
            <i class="iconfont el-icon-circle-plus-outline" /> 添加</el-button>
    </div>
    <el-table :data="category" style="width: 100%">
        <el-table-column prop="no" label="序号" width="200" align="center"> </el-table-column>
        <el-table-column prop="name" label="分类名称" align="center"> </el-table-column>
        <el-table-column prop="description" label="分类简介" align="center"> </el-table-column>
        <el-table-column prop="prop" label="操作" width="300" align="center">
            <template v-slot:default="scope">
                <el-button type="primary" size="mini" @click="editUser(scope.row)" style="margin-right: 10px">
                    <i class="iconfont el-icon-edit" /> 修改</el-button>
                <el-button type="danger" size="mini" @click="delUser(scope.row)"><i class="iconfont el-icon-delete"></i>删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model.trim="form.name"  placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类简介" prop="description">
                <el-input type="textarea" v-model="form.description" placeholder="请输入分类简介"></el-input>
            </el-form-item>
            <el-form-item label="序号" prop="no">
                <el-input v-model.trim="form.no" placeholder="请输入序号"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="addCategory">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import {
    get,
    del,
    post
} from "@/utils/request";
export default {
    data() {
        return {
            category: [],
            dialogVisible: false,
            form: {},
            title: '',
            CateName: '',
            rules:{
                name: [{
                    required: true,
                    message: '请输入分类名称',
                    trigger: 'blur'
                }],
                no: [{
                    required: true,
                    message: '请填写序号',
                    trigger: 'blur'
                }]
            },
        };
    },

    methods: {
        async getCategory() {
            let res = await get("/category/findAll");
            // console.log(1111, res.data);
            this.category = res.data;
        },
        addUser() {
            this.title = '新增分类';
            this.form = {};
            this.dialogVisible = true;
        },
        editUser(row) {
            this.title = '修改分类信息';
            this.dialogVisible = true;
            this.form = {...row}
            // {
            //     id: row.id,
            //     name: row.name,
            //     description: row.description,
            //     no: row.no,
            // }
        },
        delUser(now) {
            this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let params = {
                    id: now.id,
                };
                get('/category/deleteById', params).then(res => {
                    // console.log(res);
                    if(res.status == 200){
                        this.$message.success(res.message+' !');
                        this.getCategory();
                    }else {
                        this.$message.error("删除失败！");
                    }
                   
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleClose() {
            this.dialogVisible = false;
            this.form = {};
            //清空表单验证
            this.$refs["form"].resetFields();
        },
        addCategory() {
            let params = {
                id: this.form.id,
                name: this.form.name,
                description: this.form.description,
                no: this.form.no,
            }
            this.$refs["form"].validate(async (valid) => {
                if (valid) {
                    let res = await post('/category/saveOrUpdate', params);
                    this.$notify({
                        title: "成功",
                        message: res.message,
                        type: "success",
                    });
                    this.dialogVisible = false;
                    this.getCategory();
                    this.form = {};
                }else{
                    this.$message.warning("序号和名称不能为空");
                    return false;
                }
                })
            // if (this.form.name != undefined && this.form.no != undefined && this.form.name != '' && this.form.no != "") {
                
            // } else {
                
            // }
        },
        async search() {
            let res = await get("/category/findAll");
            const reg = this.CateName;
            this.category = res.data;
            this.category = this.category.filter((item) => item.name.match(reg));
            // console.log(1111, res.data);
        },
        clear(){
          this.getCategory();
        },
    },

    mounted() {},

    created() {
        this.getCategory();
    },
};
</script>

<style scoped>
</style>
